<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/include/tag.jsp"%>
<%@ include file="/WEB-INF/include/common.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>贷款产品</title>
<link rel="stylesheet" href="${ctx }/statics/css/loanPlan.css"/>

</head>
<body>

<div class="cd-maincontainer">
	<div class="cd-content">
        <div class="cd-box cd-box-topline mb20">
        	<input type="hidden" id="model_price" value="${rental/(1-payment/100) }">
        	<input type="hidden" id="brand" value="${brand }">
        	<input type="hidden" id="payment" value="${payment }">
        	<input type="hidden" id="installment" value="${installment }">
        	<h2 class="cd-title mb20">请您根据需要选择贷款条件</h2>
            <dl class="cd-controls cd-controls-inline mb20">
                <dt class="controls-tit">首付比例：</dt>
                <dd class="controls-list" id="sfbl">
                	<label>
                	<input type="radio" name="payment" value="0">0%
                	</label>
                	<label>
                	<input type="radio" name="payment" checked="checked" value="20">20%
                	</label>
                	<label>
                	<input type="radio" name="payment" value="30">30%
                	</label>
                	<label>
                	<input type="radio" name="payment" value="40">40%
                	</label>
                	<label>
                	<input type="radio" name="payment" value="50">50%
                	</label>
                	<label>
                	<input type="radio" name="payment" value="60">60%
                	</label>
                	<label>
                	<input type="radio" name="payment" value="70">70%
                	</label>
                	<label>
                	<input type="radio" name="payment" value="">自定义
                	</label>
                	<label>
                	<input type="text" name="custom" id="custom" disabled="disabled" value="0"  onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"  
    onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}"/>
                	</label>
                </dd>
            </dl>
            <dl class="cd-controls cd-controls-inline mb20">
                <dt class="controls-tit">还款期限：</dt>
                <dd class="controls-list" id="hkqx">
                	<c:forEach var="dictItem" items="${dictItemList}" varStatus="status">
	               		<label>
	                		<input type="radio" name="installment" checked="checked" value="${dictItem.itemName }">${dictItem.itemName}月
	                	</label>
                	</c:forEach>
                </dd>
            </dl>
            <dl class="cd-controls cd-controls-inline mb20">
                <dt class="controls-tit">贷款总额：</dt>
                <dd class="controls-list" id="dkze">
                	<input type="text" id="rental" value="${rental }">
                	<label>已贷款金额</label>
                	<input type="text" id="yidaikuan" value="${rental }">
                	<a href="#">查看更多产品</a>
                </dd>
            </dl>
            <dl id="errorMessage" class="cd-controls cd-controls-inline mb20" hidden="true">
                <dt style="color: red;letter-spacing: 3px;">提示：可贷款额度小于总贷款额，请降低贷款额度或者提高贷款首付比例！</dt>
            </dl>
        </div>
        <div>
        	<table>
        		<tr>
        			<td><label class="" >还款总额：</label></td>
        			<td><input type="text" name="expenditure" id="expenditure"></td>
        			<td><label class="" >总利息：</label></td>
        			<td><input type="text" name="interestNum" id="interestNum"></td>
        			<td><label class="" >每月共还款：</label></td>
        			<td><input type="text" name="myhk" id="myhk"></td>
        			<td><label class="" >每月利息：</label></td>
        			<td><input type="text" name="mylx" id="mylx"></td>
        		</tr>
        	</table>
        </div>
		<div class="cd-datatit fn-clear" style="margin-top: 30px;">
            <div>
            	<span class="pull-right">为您筛选出符合条件的 <em id="pnum">0</em> 款金融产品</span>
            </div>
            <div class="fn-left">
            	<dl class="datatit-main" id="orderby">
                    <dd class="datatit-item datatit-current" data-value="1"><span class="datatit-itemtxt" title="总成本从低到高">最省钱</span><i class="cd-icon cd-icon-up1" title="总成本从低到高"></i></dd>
                    <dd class="datatit-item" data-value="2"><span class="datatit-itemtxt" title="办理周期从低到高">最快</span><i class="cd-icon cd-icon-up1" title="办理周期从低到高"></i></dd>
                    <dd class="datatit-item" data-value="3"><span class="datatit-itemtxt" title="线上/线下">最便捷</span><i class="cd-icon cd-icon-down1" title="线上/线下"></i></dd>
                </dl>
            </div>
        </div>
        <div>
        	<table id="user_table" class="table table-bordered"></table>
        </div>
	</div>
</div>

<script type="text/javascript">
	$(function(){
		var rental=Number($("#rental").val());//贷款总额
		var brand=Number($("#brand").val());//品牌
		var installment=Number($("#installment").val());//分期情况
		var payment=Number($("#payment").val());//首付比例
		$("input[name=payment][value="+payment.toFixed(0)+"]").prop("checked",true);
		$("input[name=installment][value="+installment.toFixed(0)+"]").prop("checked",true);
	  	$('#user_table').bootstrapTable({
	  		url:"${ctx}/web/loanPlan/getLoanPlan.do?type=1&guidePrice="+rental+"&brandName="+brand+"&installment="+installment+"&payment="+payment,
			paginationLoop: false,
			smartDisplay: false,
		    sidePagination: 'server',
		    paginationNextText:'下一页',
		    paginationPreText:'上一页',
		    cache: false,
		   	responseHandler:function(res){
		   		var money =0;
		   		var length = res.rows.length;
		   		
		   		var installment=$("input[name='installment']:checked").val();//贷款周期
				var rate; //月利率
				var money1;//贷款金额
				var num;//月供
				var expenditure=0;//还款总额
				var myhk=0;//每月共还款
				var mylx;//每月利息
				var dkze=0;//贷款总额
		   		
		    	if(length>0){
		    		for(var i=0;i<length;i++){
		    			money+=res.rows[i].money;
		    			rate=(res.rows[i].loanVo.rate)/100;
		    			//alert(rate);
		    			money1=res.rows[i].money;
		    			dkze=dkze+money1;
		    			//alert(money1);
		    			num=(money1*rate*(Math.pow((1+rate),installment)))/(Math.pow((1+rate),installment)-1);
		    			expenditure+=num*installment;
		    			//alert(expenditure);
		    			myhk=myhk+num;
		    		}
		    	}
				$("#expenditure").val(expenditure.toFixed(2));//还款总额
				if((expenditure-dkze)<0){
					$("#interestNum").val(0);
				}else{
					$("#interestNum").val((expenditure-dkze).toFixed(2))//总利息
				}
		    	$("#myhk").val(myhk.toFixed(2))//每月还款
		    	if(((expenditure-dkze)/installment)<0){
					$("#mylx").val(0);
				}else{
					$("#mylx").val(((expenditure-dkze)/installment).toFixed(2));//每月利息
				}
		    	
		    	
		    	$("#yidaikuan").val(money);
		    	$("#pnum").text(length);
		    	if(money<$("#rental").val()){
		    		$("#errorMessage").show();
		    	}else{
		    		$("#errorMessage").hide();
		    	}
		    	
		    	return res;
		    },
			columns: [
			{
				field: 'loanVo.imageUrl',
				//title: 'logo图片',
				align: 'center',
				formatter: function(value, row, index){
					if(row.loanVo.imageUrl!=null && row.loanVo.imageUrl!=""){
						return html='<img src="'+row.loanVo.imageUrl+'" style="width:35px;"/>';
					}else{
						return "";
					}
				}
			},{
				field: 'loanVo.productName',
				title: '产品名称',
				align: 'center'
			},{
				field: 'money',
				title: '贷款金额',
				align: 'center'
			},{
				field: 'loanVo.amount',
				title: '最高贷款金额',
				align: 'center'
			},{
				field: 'loanVo.payment',
				title: '首付比例',
				align: 'center'
			},{
				field: 'loanVo.rate',
				title: '贷款利率',
				align: 'center'
			},{
				field: 'loanVo.installment',
				title: '贷款周期',
				align: 'center',
				formatter:function(value,row,index){
					return $("input[name='installment']:checked").val();
				}
			},{
				field: 'loanVo.place',
				title: '办理场所',
				align: 'center',
				formatter: function(value, row, index){
					var place =value;
					if(place==0){
						place="线上/线下";
					}else if(place==1){
						place="线上";
					}else{
						place="线下";
					}
					return place;
				}
			},{
				field: 'loanVo.period',
				title: '办理周期',
				align: 'center'
			},{
				field: 'num',
				title: '每月还款',
				align: 'center',
				formatter: function(value, row, index){
					var installment=$("input[name='installment']:checked").val();//贷款周期
					var rate=(row.loanVo.rate)/100; //月利率
					var money=row.money;//贷款金额
					//等额本息=（月还款额=本金*月利率*(1+月利率)^还款月数/[(1+月利率)^还款月数-1]）45446
					//Math.pow((2,4) 2的4次方
					var num=(money*rate*(Math.pow((1+rate),installment)))/(Math.pow((1+rate),installment)-1);
					return num.toFixed(2);
				}
			}]
		});
		
	
	 $("input[type=radio]").click(function(){
		var payment=0;
		var installment=0;
		if($("input[name=payment]:checked").val()==''){//表示选择了自定义 所以payment为输入框里的值
			payment=$("#custom").val();
			if(payment==''){
				payment=0;
			}
			$("#rental").val(Number($("#model_price").val()*(1-payment/100)).toFixed(0));
			document.getElementById("custom").disabled="";
			$("#custom").change(function() {
				if($("#custom").val()>=0 && $("#custom").val()<=100){
					payment=$("#custom").val();
				}else{
					alert("请输入0-100的整数");
					return;
				}
				installment = $("input[name=installment]:checked").val();
				$("#rental").val(Number($("#model_price").val()*(1-payment/100)).toFixed(0));
				var rental=$("#rental").val();//贷款总额
				var brand=$("#brand").val();//品牌
				
				 var opt = {
						url:"${ctx}/web/loanPlan/getLoanPlan.do?type=1&guidePrice="+rental+"&brandName="+brand+"&installment="+installment+"&payment="+payment,
				    };
				    $("#user_table").bootstrapTable('refresh', opt); 
				
			});
		}else{
			document.getElementById("custom").disabled="disabled";
			$("#custom").val("");
			payment = $("input[name=payment]:checked").val();
		}
		
		installment = $("input[name=installment]:checked").val();
		$("#rental").val(Number($("#model_price").val()*(1-payment/100)).toFixed(0));
		var rental=$("#rental").val();//贷款总额
		var brand=$("#brand").val();//品牌
		
		 var opt = {
				url:"${ctx}/web/loanPlan/getLoanPlan.do?type=1&guidePrice="+rental+"&brandName="+brand+"&installment="+installment+"&payment="+payment,
		    };
		    $("#user_table").bootstrapTable('refresh', opt);
	}); 
	 
	 $(".datatit-item").click(function(){
			var payment;
			if($("input[name=payment]:checked").val()==''){//表示选择了自定义 所以payment为输入框里的值
				payment=$("#custom").val();
			}else{
				payment = $("input[name=payment]:checked").val();
			}
			var installment = $("input[name=installment]:checked").val();
			
			var rental=$("#rental").val();//贷款总额
			var brand=$("#brand").val();//品牌
			var type= $(this).attr("data-value");
			$(".datatit-item").removeClass("datatit-current");
			$(this).toggleClass("datatit-current");
			 var opt = {
						url:"${ctx}/web/loanPlan/getLoanPlan.do?type="+type+"&guidePrice="+rental+"&brandName="+brand+"&installment="+installment+"&payment="+payment,
				    };
			 $("#user_table").bootstrapTable('refresh', opt);
		});
	 
	});
	
	
	
</script>
</body>
</html>